<template>
  <div class="app-container">
    <div class="filter-container">
      <el-select v-model="listQuery.streamDir" placeholder="请选择" class="filter-item" style="width: 300px">
        <el-option
          v-for="(item,index) in rtcStreamList"
          :key="index"
          :label="item"
          :value="item">
        </el-option>
      </el-select>

      <el-date-picker
        class="filter-item"
        v-model="listQuery.time"
        type="date"
        value-format="timestamp"
        :picker-options="datePickerOptions"
        placeholder="选择日期">
      </el-date-picker>
      <el-button style="margin-left: 10px" :loading="listLoading" class="filter-item" type="primary"
                 @click="getList">查询
      </el-button>
    </div>
    <el-table
      :data="dataList"
      v-loading="listLoading" element-loading-text="加载中..." border fit
      style="width: 100%">
      <el-table-column
        label="日期">
        <template slot-scope="scope">
          <span>{{scope.row.dateTime | parseTimeFilter('{y}-{m}-{d} {h}:{i}')}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="350">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="handleShow(scope.row)">播放</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      title="详情"
      :show-close="false"
      :visible.sync="dialogVisible"
      width="600px">
      <div class="dialog-flv-wrap">
        <template v-if="dialogVisible && tempUrl">
          <hls-player :hls-url="tempUrl"></hls-player>
        </template>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleClose">关 闭</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  import FlvPlayer from '@/components/FlvPlayer';
  import HlsPlayer from '@/components/HlsPlayer';
  import {getRecordStreamDirList, getRecordList} from "@/api/api";
  import {parseTime} from "@/utils";

  const _now = Date.now();

  export default {
    name: "History",
    data() {
      return {
        listQuery: {
          time: _now,
          streamDir: ''
        },
        datePickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          }
        },
        dataList: [],
        rtcStreamList: [],
        listLoading: false,
        dialogVisible: false,
        tempUrl: ''
      }
    },

    components: {FlvPlayer, HlsPlayer},
    async created() {
      await this.init();
    },
    methods: {
      async init() {
        let response = await getRecordStreamDirList();
        let array = response.data || [];
        this.listLoading = false;
        if (array.length > 0) {
          this.rtcStreamList = array;
        }
      },

      async getList() {

        if (!this.listQuery.streamDir || !this.listQuery.time) {
          return;
        }

        let options = {
          streamPath: this.listQuery.streamDir,
          searchDate: this.getSearchDate()
        };

        let response = await getRecordList(options);
        let array = response.data || [];

        let dataList = array.map((item) => {
          return {
            dateTime: this.formatItemDate(item.filename),
            filepath: item.filepath
          }
        });

        this.dataList = dataList;
      },

      //
      getSearchDate() {
        return parseTime(this.listQuery.time, '{y}{m}{d}')
      },

      formatItemDate(date) {
        if (!date) {
          return ''
        }
        const year = date.slice(0, 4);
        const month = date.slice(4, 6);
        const day = date.slice(6, 8);
        const hour = date.slice(8, 10);
        const minutes = date.slice(10, 12);
        return new Date(year, month, day, hour, minutes, 0).getTime();
      },

      //
      handleShow(item) {
        this.tempUrl = item.filepath;
        this.dialogVisible = true;
      },
      handleClose() {
        this.tempUrl = null;
        this.dialogVisible = false;
      }
    }
  }
</script>

<style lang="scss" scoped>

  .dialog-flv-wrap {
    width: 100%;
    height: 500px;
  }
</style>
